<template>
	<ElDatePicker
	  v-model="props.data[props.field.name]"
	  :type="props.field.dateType || 'date'"
	  :placeholder="placeholderText"
	  :start-placeholder="startPlaceholderText"
	  :end-placeholder="endPlaceholderText"
	  :format="props.field.displayFormat || 'YYYY-MM-DD'"
	  :value-format="props.field.displayFormat || 'YYYY-MM-DD'"
	  style="width: 100%"
	  clearable
	/>
</template>

<!-- 'year' | 'years' |'month' | 'months' | 'date' | 'dates' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'monthrange' | 'yearrange' -->
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import type { PropType } from 'vue'

const emit = defineEmits(['update:value'])
const props = defineProps({
  field: {
    type: Object as PropType<Record<string, any>>,
    required: true,
    default: () => ({})
  },
  data: {
    type: Object as PropType<Record<string, any>>,
    default: () => ({})
  },
})

// 计算属性
const placeholderText = computed(() => {
  return props.field.placeholder || `请选择${props.field.label || ''}值`
})

const startPlaceholderText = computed(() => {
  return props.field.placeholder || `请选择开始${props.field.label || ''}值`
})

const endPlaceholderText = computed(() => {
  return props.field.placeholder || `请选择结束${props.field.label || ''}值`
})


// 双向绑定值
const fieldValue = computed({
  get: () => props.data[props.field.name],
  set: (value) => {
    emit('update:value', value)
  }
})

</script>